<template>
	<view class="whole">
		<u-toast ref="uToast" />
		<view class="top">
			<image src="../../static/jiantous.png" mode="" style="width: 34rpx;height: 34rpx;margin-left: 30rpx;" @click="returns()"></image>
			<text style="font-size: 34rpx;color: #FFFFFF;font-weight: bold;">邀请好友</text>
			<view style="opacity:0.01;">	1123</view>
			
		</view>	
	  <view class="background">
		  <image src="../../static/background_fenxiang.png" mode="" class="background_img"></image>
		</view>
		
		<view class="item">
			<text style="color: #BBBBBE;font-size: 34rpx;padding-top: 60rpx;">您的邀请码</text>
			<text style="font-size: 56rpx;color: #FFFFFF;" v-model="copyitem"   v-if="copyitem!=''">{{copyitem}}</text>
		   <text style="font-size: 56rpx;color: #FFFFFF;opacity: 0.01;" v-if="copyitem==''">1</text>
			<view style="" class="button" @click="copy(copyitem)">
				<text>复制</text>	
			</view>
			
			<!-- <image :src="this.copyitemimg" mode="widthFix" style="width: 480rpx;height: 480rpx;margin-top: 130rpx;"></image> -->
			
			<u-lazy-load :image="this.copyitemimg"  border-radius="24" style="width: 480rpx;height: 480rpx;margin-top: 130rpx;" @longpress="long" ></u-lazy-load>
			<text style="font-size: 28rpx;color: #BBBBBE;margin-top: 30rpx;" v-if="copyitemurl!=''">{{copyitemurl}}</text>
			<text style="font-size: 56rpx;color: #FFFFFF;opacity: 0.01;" v-if="copyitem==''">1</text>
			<view style="" class="button" @click="copy(copyitemurl)">
				<text>复制</text>	
			</view>
		</view>	
	</view>
</template>

<script>
	import api from '../../api/api'
	export default {
		data() {
			return {
				copyitem:'',
				copyitemimg:'',
				copyitemurl:''
			}
		},
		onLoad() {
			this.invitationCode()
			
		},
		methods:{
			long(){
				console.log('aaa')
			},
			returns(){
				uni.navigateBack({
					delta: 1 ,//返回的页面数，如果 delta 大于现有页面数，则返回到首页,
				});
				
			},
			copy(itme){
				uni.setClipboardData({
					data: itme,//要被复制的内容
				});
				uni.hideToast()
				this.$refs.uToast.show({
					title: '复制成功',
					type:'succes'
				})
			},
			async invitationCode(){
				let res = await api.invitationCode({})
				if(res.code==0){
					this.copyitem = res.data.invitation_code
					this.copyitemurl = res.data.invitation_url
					this.base64()
				}
				console.log(res.data)
			},
			async base64(){
				let res = await api.base64({
					query:{
						url:this.copyitemurl
					},
					method:'post'
				})
				this.copyitemimg= res.data
			}
		}
	}
</script>

<style>
	.whole{
		  background-image: url('/static/background_login.png');
		  /* background-image: url('http://img.senbiaojita.cn/background_login.png'); */
		  background-repeat: no-repeat;
	  	  /* background-position: center; */
		  background-attachment: fixed;
		  /* background-size: cover; */
		  background-size: 100%;
		  
		  /* -webkit-background-size: cover;
		  -moz-background-size: cover;
		  -o-background-size: cover; */
		  
		  width: 100%;
		  height: 100vh;
		  background-color: #111218;
		  z-index: 1;
	}
 .background{
	 
 }
 .background_img{
	position: absolute;
	 top: 20%;
	 left: 50%;
	 transform: translate(-50%);
	 z-index: 2;
	 height: 1100rpx;
	 width: 85%;
	 /* margin-left: 50rpx; */
 }
 .item{
	 position: absolute;
	  top: 20%;
	  left: 50%;
	  z-index: 2;
	  transform: translate(-50%);
	  display: flex;
	  justify-content: space-between;
	  flex-direction: column;
	  align-items: center;
 }
 .button{
	 color: #FFFFFF;
	 background-color: #F78623 ;
	 background-image: linear-gradient(to right, #F78623 , #D5280A );
	 text-align: center;
	 line-height: 70rpx;
	 font-size: 28rpx;
	 border-radius: 16rpx;
	 margin-top: 20rpx;
	 /* margin-left: 50%;transform: translate(-50%); */
	 width: 160rpx;
	 height: 70rpx;
	 margin-top: 20rpx;
 }
 .top{
	 position: absolute;
	 top: 116rpx;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 width: 100%;
	 
 }
 

	
	

</style>
